<template>
  <div class="yty-history">
    <h3 class="h3">内容管理</h3>
    <a-form-model
      :model="form"
      :colon="false"
      :labelCol="{span:6}"
      :wrapper-col="{span:17}"
      style="margin:10px 0"
    >
      <a-row style="display: flex;align-items: center;">
        <a-col :span="5">
          <a-form-model-item label="关键词" class="from-item__class">
            <a-input v-model="form.keyword" />
          </a-form-model-item>
        </a-col>
        <a-col :span="5">
          <a-form-model-item label="内容分类" class="from-item__class">
            <a-input v-model="form.contentType" />
          </a-form-model-item>
        </a-col>
        <!-- <a-col :span="6">
          <a-form-model-item label="资料类型" class="from-item__class">
            <a-select v-model="form.informationType" placeholder allow-clear>
              <a-select-option value="公司资质">公司资质</a-select-option>
              <a-select-option value="公司资质">公司资质</a-select-option>
              <a-select-option value="公司资质">公司资质</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>-->
        <a-col :span="9   " style="display: flex;justify-content: space-between;">
          <a-button style="letter-spacing: 8px;" @click="onSubmit" class="sousuobtn">查询</a-button>
        </a-col>
        <a-col :span="5">
          <a-button
            type="danger"
            @click="showModalA"
            style="background:#207064;border:0;color:black;width:100px"
          >上传资料</a-button>
          <a-button
            type="primary"
            class="del-btn"
            style="background:#954a45;border:0;color:black;margin-left:10px;width:100px"
          >删除</a-button>
          <a-button class="exportbtn">
            <a-icon type="cloud-download" />导出数据
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
    <!-- 批量操作 -->

    <div class="tableclass">
      <a-table
        :row-selection="{ onChange:onChange,onSelect:onSelect }"
        :columns="columns"
        :data-source="list"
        :pagination="false"
      >
        <template slot="operation" slot-scope="text,data,index">
          <div class="editable-row-operations">
            <span>
              <a class="detail-btn" @click="showModal(data)">查看详情</a>
            </span>
            <span>
              <a-button class="edit-btn" @click="editData(data)">编辑</a-button>
            </span>
            <span>
              <a-button class="del-btn" @click="delSelect(data,index)">删除</a-button>
            </span>
          </div>
        </template>
      </a-table>

      <div class="content-bottom clearfix">
        <div class="page-box">
          <div class="page-left">
            <a-pagination
              v-model="form.current"
              :total="total"
              :show-total="total => `共 ${total}条记录`"
              :defaultPageSize="form.size"
              :item-render="itemRender"
              @change="pagechangeFn"
            />
          </div>
        </div>
      </div>
      <!-- //详情弹出框 -->
      <a-modal
        title="详情资料"
        :visible="visible"
        :confirm-loading="confirmLoading"
        @ok="handleOk"
        @cancel="handleCancel"
        :footer="null"
        centered
      >
        <a-form-model
          class="xqmodal"
          :form="list"
          :label-col="{ span: 5 }"
          :wrapper-col="{ span: 12 }"
        >
          <a-form-model-item label="内容分类">{{this.detail.contentType}}</a-form-model-item>
          <a-form-model-item label="资料标题">{{this.detail.title}}</a-form-model-item>
          <a-form-model-item label="资料内容">{{this.detail.content}}</a-form-model-item>
          <a-form-model-item label="创建时间">{{this.detail.creatTime}}</a-form-model-item>
          <a-form-model-item label="资料类型">{{this.detail.informationType}}</a-form-model-item>
        </a-form-model>
      </a-modal>
      <!-- 新增弹出框 -->
      <a-modal
        :title="title"
        :visible="visibleA"
        :confirm-loading="confirmLoadingA"
        @cancel="handleCancel"
        closable
        width="80%"
        centered
        destroyOnClose
        :maskClosable="false"
      >
        <a-form-model :form="addForm" :label-col="{ span: 4 }" :wrapper-col="{ span: 17 }">
          <a-form-model-item label="内容分类" :wrapper-col="{ span: 8 }">
            <a-input v-model="addForm.contentType" placeholder="请填写内容分类" />
          </a-form-model-item>
          <a-form-model-item label="资料标题" :wrapper-col="{ span: 8 }">
            <a-input v-model="addForm.title" placeholder="请填写资料标题" />
          </a-form-model-item>
          <a-form-model-item label="创建时间">
            <a-date-picker
              :defaultValue="addForm.creatTime"
              placeholder="创建时间"
              @change="onChangeDate"
            />
          </a-form-model-item>
          <a-form-model-item label="资料内容" :wrapper-col="{ span: 19 }">
            <!--<a-textarea v-model="addForm.content" placeholder="请填写资料内容" :rows="4" />-->
            <template>
              <div>
                <div class="edit_container">
                  <a-upload
                    :file-list="lists"
                    :remove="handleRemove"
                    :before-upload="beforeUpload"
                    multiple
                    @change="upChange"
                  >
                    <a-button class="upload">
                      <a-icon type="upload" />上传
                    </a-button>
                  </a-upload>
                  <quill-editor
                    class="ql-editor"
                    v-model="addForm.content"
                    ref="myQuillEditor"
                    :options="editorOption"
                    @blur="onEditorBlur($event)"
                    @foucus="onEditorBlur($event)"
                    @change="onEditorChange($event)"
                  ></quill-editor>
                </div>
              </div>
            </template>
          </a-form-model-item>

          <!-- <a-form-model-item label="资料类型">
            <a-select v-model="addForm.informationType" placeholder="选择资料类型">
              <a-select-option value="公司资质">公司资质</a-select-option>
              <a-select-option value="公司资质">公司资质</a-select-option>
              <a-select-option value="公司资质">公司资质</a-select-option>
            </a-select>
          </a-form-model-item>-->
        </a-form-model>
        <template slot="footer">
          <a-button class="btn" type="primary" @click="confirmSend">确认</a-button>
          <a-button class="btn" type="info" @click="cancelBtn">取消</a-button>
        </template>
      </a-modal>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import "moment/locale/zh-cn";
import { quillEditor } from "vue-quill-editor"; //调用编辑器
//导入样式
import "quill/dist/quill.snow.css";
const toolbarOptions = [
  //工具栏配置
  ["bold", "italic", "underline", "strike"], //加粗，斜体，下划线，删除线
  ["blockquote", "code-block"], //引用，代码块

  [{ header: 1 }, { header: 2 }], // 标题，键值对的形式；1、2表示字体大小
  [{ list: "ordered" }, { list: "bullet" }], //列表
  [{ script: "sub" }, { script: "super" }], // 上下标
  [{ indent: "-1" }, { indent: "+1" }], // 缩进
  [{ direction: "rtl" }], // 文本方向

  [{ size: ["small", false, "large", "huge"] }], // 字体大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], //几级标题

  [{ color: [] }, { background: [] }], // 字体颜色，字体背景颜色
  //[{ font: [] }], //字体
  [{ align: [] }], //对齐方式

  ["clean"], //清除字体样式
  ["image"], //上传图片
];

export default {
  name: "yty-history",
  components: { quillEditor },
  data() {
    return {
      lists: [],
      flag: false,
      total: 0,
      moment,
      title: "上传资料",
      form: {
        current: 1,
        size: 9,
        keyword: "",
        contentType: "",
        informationType: "公司资质",
      },
      //表格数据
      list: [],

      //详情数据
      detail: [],
      //新增数据
      addForm: {
        contentType: null,
        title: "",
        content: "",
        informationType: "公司资质",
        creatTime: moment(),
      },
      newData: {
        userId: "zhangsan",
        contentType: "",
        content: "",
        hit: 0,
        creatTime: null,
        title: "",
        informationType: "",
      },

      selectedRowKeys: [],
      columns: [
        {
          title: "序号",
          dataIndex: "num",
          align: "center",
          width: "5%",
          customRender: (text, record, index) =>
            `${(this.form.current - 1) * this.form.size + index + 1}`,
        },

        {
          title: "上传用户",
          dataIndex: "userId",
          align: "center",
          width: "10%",
          scopedSlots: { customRender: "name" },
        },
        {
          title: "内容分类",
          dataIndex: "contentType",
          align: "center",
          width: "10%",
          scopedSlots: { customRender: "classification" },
        },
        {
          title: "内容",
          dataIndex: "content",
          ellipsis: true,
          width: "35%",
          scopedSlots: { customRender: "content" },
        },
        {
          title: "阅读量",
          dataIndex: "hit",
          align: "center",
          width: "10%",
          scopedSlots: { customRender: "quantity" },
        },
        {
          title: "操作",
          dataIndex: "operation",
          align: "center",
          scopedSlots: { customRender: "operation" },
        },
      ],
      current: 1,
      //详情弹出框
      visible: false,
      visibleA: false,
      confirmLoading: false,
      confirmLoadingA: false,
      //查询数据

      //富文本
      toolbarTips: [
        { Choice: ".ql-bold", title: "加粗" },
        { Choice: ".ql-italic", title: "倾斜" },
        { Choice: ".ql-underline", title: "下划线" },
        { Choice: ".ql-strike", title: "删除线" },
        { Choice: ".ql-blockquote", title: "块引用" },
        { Choice: ".ql-code-block", title: "插入代码段" },

        { Choice: '.ql-header[value="1"]', title: "h1" },
        { Choice: '.ql-header[value="2"]', title: "h2" },
        { Choice: '.ql-list[value="ordered"]', title: "编号列表" },
        { Choice: '.ql-list[value="bullet"]', title: "项目列表" },
        { Choice: '.ql-list[value="sub"]', title: "下标" },
        { Choice: '.ql-list[value="super"]', title: "上标" },
        { Choice: '.ql-indent[value="-1"]', title: "向左缩进" },
        { Choice: '.ql-indent[value="+1"]', title: "向右缩进" },
        { Choice: '.ql-direction[value="rtl"]', title: "文本方向" },
        {
          Choice: '.ql-size .ql-picker-item[data-value="small"]',
          title: "小号",
        },
        {
          Choice: '.ql-size .ql-picker-item[data-value="large"]',
          title: "大号",
        },
        {
          Choice: '.ql-size .ql-picker-item[data-value="huge"]',
          title: "超大号",
        },
        { Choice: ".ql-size .ql-picker-item:nth-child(2)", title: "标准" },
        { Choice: ".ql-header .ql-picker-label", title: "标题大小" },
        {
          Choice: '.ql-header .ql-picker-item[data-value="1"]',
          title: "标题一",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="2"]',
          title: "标题二",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="3"]',
          title: "标题三",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="4"]',
          title: "标题四",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="5"]',
          title: "标题五",
        },
        {
          Choice: '.ql-header .ql-picker-item[data-value="6"]',
          title: "标题六",
        },
        { Choice: ".ql-header .ql-picker-item:last-child", title: "标准" },
        { Choice: ".ql-color", title: "字体颜色" },
        { Choice: ".ql-background", title: "背景颜色" },
        { Choice: ".ql-align", title: "对齐方式" },
        { Choice: ".ql-align .ql-picker-item:first-child", title: "居左对齐" },
        {
          Choice: '.ql-align .ql-picker-item[data-value="center"]',
          title: "居中对齐",
        },
        {
          Choice: '.ql-align .ql-picker-item[data-value="right"]',
          title: "居右对齐",
        },
        {
          Choice: '.ql-align .ql-picker-item[data-value="justify"]',
          title: "两端对齐",
        },
        { Choice: ".ql-clean", title: "清除格式" },
        { Choice: ".ql-image", title: "图像" },
      ],
      content: "",
      editorOption: {
        placeholder: "请输入....",
        theme: "snow",
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              image: function (value) {
                if (value) {
                  //调用antd图片上传
                  document.querySelector(".ant-upload .ant-btn").click();
                } else {
                  this.quill.format("imgae", false); //禁用富文本内部上传图片
                }
              },
            },
          },
        },
      },
      fileList: [],
      uploading: false,
      link: "", //下载链接
    };
  },
  methods: {
    getCurrentData() {
      return new Date().toLocaleDateString();
    },
    //删除操作
    delSelect(data) {
      let _that = this;
      this.$confirm({
        title: "是否确认删除",
        onOk() {
          let id = data.id;
          _that.$api.delete_Data(id).then((res) => {
            // console.log(res.data.data);
            if (res.status == 200) {
              _that.$message.info("删除成功");
              _that.onSubmit();
            }
          });
        },
        onCancel() {
          console.log("Cancel");
        },
        class: "delk",
      });
    },
    //批量删除
    // batchDelete() {
    //   this.id;
    //   this.$api.delete_Data(id).then((res) => {
    //     console.log(res.data.data);
    //     if (res.status == 200) {
    //       this.$message.info("删除成功");
    //       this.list = res.data.data;
    //       this.onSubmit();
    //     }
    //   });
    // },
    //查询接口
    onSubmit() {
      this.$api.inquire_Data(this.form).then((res) => {
        if (res.status == 200) {
          this.list = res.data.data;
          this.total = res.data.total;
          this.list.forEach((v) => {
            // console.log(moment(parseInt(v.creatTime)));
            v.creatTime = moment(v.creatTime).format("YYYY/MM/DD ");
          });
        }
      });
    },
    //弹出框方法,查看详情
    showModal(data) {
      this.detail = data;
      this.visible = true;
      let id = data.id;
      this.$api.look_Data(id).then((res) => {
        if (res.status == 200) {
          this.onSubmit();
        }
      });
    },
    //上传按钮
    showModalA() {
      this.title = "上传资料";
      this.visibleA = true;
      this.$nextTick(() => {
        this.autoTip();
      });

      // this.addForm.creatTime = new Date().toLocaleDateString()
    },
    //编辑按钮
    editData(data) {
      this.title = "编辑资料";
      this.visibleA = true;
      this.addForm = data;
    },
    //
    //弹出框共享关闭方法
    handleOk() {
      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 2000);
    },
    //日期方法
    onChangeDate(date, dateString) {
      this.addForm.creatTime = moment(Date.now(), dateString)._i;
    },
    //取消按钮
    cancelBtn() {
      this.visibleA = false;
    },
    //新增修改数据
    confirmSend() {
      var re1 = new RegExp("<.+?>", "g"); //匹配html标签的正则表达式，"g"是搜索匹配多个符合的内容
      this.newData.content = this.addForm.content.replace(re1, ""); //执行替换成空字符
      console.log(this.newData.content);
      let Time = JSON.parse(JSON.stringify(this.addForm.creatTime));
      this.newData.contentType = this.addForm.contentType;
      this.newData.content = this.addForm.content;
      this.newData.title = this.addForm.title;
      this.newData.informationType = this.addForm.informationType;
      this.newData.creatTime = new Date(Time).getTime();
      //判断
      if (this.title == "上传资料") {
        this.$api.informationAdd(this.newData).then((res) => {
          if (res.status == 200) {
            this.$message.info("上传成功");
            this.addForm = {
              creatTime: moment(),
              informationType: "公司资质",
            };
            this.onSubmit();
          }
        });
        this.visibleA = false;
      } else {
        if (typeof this.addForm.creatTime == "string") {
          this.addForm.creatTime = moment(
            Date.now(),
            this.addForm.creatTime
          )._i;
        }
        // console.log(this.addForm.creatTime);
        this.$api.edit_Data(this.addForm).then((res) => {
          if (res.status == 200) {
            this.$message.info("修改成功!");
            this.addForm = {
              creatTime: "",
              informationType: "公司资质",
            };
            this.onSubmit();
          }
        });
        this.visibleA = false;
      }
    },

    //关闭弹窗
    handleCancel() {
      console.log("点击关闭按钮");
      this.addForm = {
        creatTime: moment(),
        informationType: "公司资质",
      };

      this.visible = false;
      this.visibleA = false;
    },
    // 表格方法
    onSelectChange(selectedRowKeys) {
      console.log("已选择的表格: ", selectedRowKeys);
      this.selectedRowKeys = selectedRowKeys;
    },
    //表格复选
    onChange(selectedRowKeys, selectedRows) {
      console.log(selectedRowKeys, selectedRows);
      this.delall = selectedRows;
    },
    onSelect() {},
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return <a>上一页</a>;
      } else if (type === "next") {
        return <a>下一页</a>;
      }
      return originalElement;
    },
    pagechangeFn(page, pageSize) {
      pageSize;
      this.form.current = page;
      this.onSubmit();
    },
    //组件上传
    handleRemove(file) {
      const index = this.fileList.indexOf(file);
      const newFileList = this.fileList.slice();
      newFileList.splice(index, 1);
      this.fileList = newFileList;
    },
    beforeUpload(file) {
      this.fileList = [...this.fileList, file];
      return false;
    },
    upChange(info,e) {
      console.log(info,e);
      //获取富文本组件实例
      let quill = this.$refs.myQuillEditor.quill;
      console.log(this.fileList);
      const { fileList } = this;
      console.log(fileList);
      const formData = new FormData();
      fileList.forEach((file, index) => {
        formData.append("multipartFileList[" + index + "]", file);
      });
      // this.$api.PostuploadFiles(formData).then((res) => {
      //   console.log(res);
      // });
    },
    //富文本上传图片
    handleUpload() {
      console.log(1111);

      //this.getdata(formData);
    },
    onEditorReady() {}, //富文本准备编辑器
    onEditorBlur() {}, //失去焦点事件
    onEditorFoucus(val, editor) {
      console.log(val); //富文本获得焦点时的内容
      editor.enable(false); //在获取焦点时禁用
    },
    onEditorChange() {}, //内容改变事件
    //富文本提示
    autoTip() {
      for (let item of this.toolbarTips) {
        let tip = document.querySelector(".quill-editor"+" "+ item.Choice);
        if (!tip) continue;
        tip.setAttribute("title", item.title);
      }
    },
  },
  mounted() {
    this.onSubmit();
  },
  computed: {
    editor() {
      return this.$ref.myQuillEditor.quill;
    },
  },
};
</script>
<style scoped>
.detail-btn {
  color: #9fb043;
}

.editable-row-operations span {
  margin-right: 15px;
}
a-form-model-item {
  color: rgb(133, 128, 128);
}
.del-btn {
  background: #954a45;
  border: #954a45;
}
.del-btn:hover {
  color: rgba(0, 0, 0, 0.65);
}
.edit-btn {
  background: #207064;
  border: #207064;
}
.yty-history {
  width: 98%;
  height: 100%;
  padding: 2%;
  box-sizing: border-box;
}
.yty-history .from-item__class {
  display: flex;
}
.sousuobtn {
  font-size: 14px;
  background-color: #207064;
  border-color: #207064;
  font-weight: 600;
}
.exportbtn {
  background-color: transparent;
  border: 0;
  color: #207064;
}
.content-bottom {
  margin-top: 24px;
  width: 100%;
}
.page-box {
  display: flex;
  justify-content: space-between;
}
.page-left {
  position: absolute;
  right: 3%;
  bottom: 45px;
}

.page-right {
  display: flex;
  position: absolute;
  left: 3%;
  bottom: 45px;
}
.totalclass {
  color: rgba(255, 255, 255, 0.7);
  font-size: 14px;
  margin-right: 20px;
}

::v-deep.ant-form-item {
  color: rgb(202, 196, 196);
}
::v-deep.yty-history .ant-form-item {
  margin-bottom: 0;
}
::v-deep.ant-form-item-children {
  display: inline-block;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* 表格样式 */
.handle {
  width: 100%;
  color: #207064;
  display: flex;
  justify-content: space-between;
}
.handle > span:hover {
  cursor: pointer;
  color: aquamarine;
}
::v-deep.yty-history .ant-table table {
  border-radius: 0;
  border-left: 1px solid #207064;
  border-right: 1px solid #207064;
}
::v-deep.yty-history .ant-table-thead > tr > th {
  background-color: #207064;
  color: #9fb043;
  font-size: 16px;
  border-bottom: 0;
  border-radius: 0;
}
::v-deep.yty-history .ant-table-tbody > tr > td {
  color: rgba(255, 255, 255, 0.7);
  border-bottom: 1px solid #2c6a60;
}
::v-deep.yty-history .ant-table-tbody > tr:hover > td {
  background-color: transparent !important;
}
::v-deep.yty-history .ant-table-tbody > tr.ant-table-row-selected td {
  background-color: transparent;
}
::v-deep.yty-history .ant-checkbox-indeterminate .ant-checkbox-inner::after {
  background-color: #37ddc0;
}
::v-deep.yty-history .ant-checkbox-inner {
  border: 1px solid #37ddc0;
  background-color: #8cb3ae;
}
::v-deep.yty-history .ant-checkbox-checked .ant-checkbox-inner::after {
  border: 2px solid #37ddc0;
  border-top: 0;
  border-left: 0;
}
/* 分页 */
::v-deep.yty-history .ant-pagination-total-text {
  color: rgba(255, 255, 255, 0.7);
}

::v-deep .ant-upload.ant-upload-select {
  display: none;
}
p {
  margin: 10px;
}

.ql-snow .ql-picker.ql-size .ql-picker-label::before,
.ql-snow .ql-picker.ql-size .ql-picker-item::before {
  content: "14px";
}

.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
  content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
  content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
  content: "32px";
}

.ql-snow .ql-picker.ql-header .ql-picker-label::before,
.ql-snow .ql-picker.ql-header .ql-picker-item::before {
  content: "文本";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
  content: "标题1";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
  content: "标题2";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
  content: "标题3";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
  content: "标题4";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
  content: "标题5";
}
.ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
.ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
  content: "标题6";
}

.ql-snow .ql-picker.ql-font .ql-picker-label::before,
.ql-snow .ql-picker.ql-font .ql-picker-item::before {
  content: "标准字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
  content: "衬线字体";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
  content: "等宽字体";
}
::v-deep .ql-container {
  height: 300px;
}
::v-deep .ql-toolbar.ql-snow {
  background-color: white;
}
</style>
